import 'package:drive/drive.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mvc/flutter_mvc.dart';
import 'package:beautiful_demo/common/res.dart';
import 'package:beautiful_demo/common/utils/string.dart';
import 'package:beautiful_demo/common/widget/button.dart';
import 'package:beautiful_demo/common/widget/widget.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

import 'bean/good_bean.dart';
import 'controller.dart';

class PicItem extends MvcStatelessWidget<GoodController> {
  @override
  Widget build(BuildContext context) {

    if (c.defaultImage.isNotEmpty && c.data == null) {
      return Hero(
          tag: "img_${c.goodId}${c.tagEnd}",
          child: CachedImage(
            c.defaultImage,
            fit: BoxFit.cover,
            height: 375.dp,
          ));
    }
    return Hero(
      tag: "img_${c.goodId}${c.tagEnd}",
      child: Container(
        height: 375.dp,
        child: PageView.builder(
          physics: BouncingScrollPhysics(),
          itemBuilder: (ctx, index) {
            return Stack(
              children: [
                if (index == 0 && c.defaultImage.isNotEmpty)
                  CachedImage(
                    c.defaultImage,
                    fit: BoxFit.cover,
                    height: 375.dp,
                  ),
                Positioned.fill(
                  child: GestureDetector(
                    onTap: (){
                      c.onPicClick(index);
                    },
                    child: CachedImage(
                      c.data?.pic[index] + "_500x500.webp",
                      loadingImage: index == 0 ? "" : null,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Positioned(
                  right: 8.dp,
                  bottom: 12.dp,
                  child: Container(
                    height: 18.dp,
                    padding: EdgeInsets.only(left: 12.dp, right: 12.dp),
                    decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.5),
                        borderRadius: BorderRadius.circular(9.dp)),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          (index + 1).toString(),
                          style: resTextStyle.copyWith(
                              color: Colors.white, fontSize: 10.sp),
                        ),
                        Text(
                          "/${c.data?.pic?.length ?? 0}",
                          style: resTextStyle.copyWith(
                              color: Colors.white.withOpacity(0.6),
                              fontSize: 10.sp),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            );
          },
          itemCount: c.data?.pic?.length ?? 0,
        ),
      ),
    );
  }
}

class TitleItem extends MvcStatelessWidget<GoodController> {
  @override
  Widget build(BuildContext context) {
    final prices = StringUtils.splitPrice(c.data?.price ?? c.defaultPrice);
    return Container(
      height: 127.dp,
      margin: EdgeInsets.only(left: 8.dp, right: 8.dp, top: 8.dp),
      padding: EdgeInsets.only(left: 12.dp, top: 9.dp),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(8.dp)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 33.dp,
            child: Row(
              children: [

                SizedBox(
                  width: 6.dp,
                ),
                Hero(
                  tag: "price_${c.goodId}${c.tagEnd}",
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        "¥",
                        style: resTextStyleMain.copyWith(height: 1.5),
                      ),
                      Text(
                        prices[0],
                        style: resTextStyleMain.copyWith(
                            fontSize: 25.sp, height: 1.1),
                      ),
                      Text(
                        ".${prices[1]}",
                        style: resTextStyleMain.copyWith(height: 1.5),
                      ),
                    ],
                  ),
                ),
                Expanded(child: Container()),
                Container(
                  height: 20.dp,
                  alignment: Alignment.centerLeft,
                  decoration: BoxDecoration(
                      color: Color(0xffF6F6F8),
                      borderRadius:
                          resBorderRadius(topLeft: 10.dp, bottomLeft: 10.dp)),
                  padding: EdgeInsets.only(left: 12.dp, right: 12.dp),
                  child: Text(
                    "货号:${c.data?.codeNum ?? "0"}",
                    style: resTextStyle30.copyWith(fontSize: 12.sp),
                  ),
                )
              ],
            ),
          ),
          SizedBox(
            height: 9.dp,
          ),
          Padding(
              padding: EdgeInsets.only(right: 18.dp),
              child: Hero(
                tag: "title_${c.goodId}${c.tagEnd}",
                child: Text(
                  c.data?.name ?? c.defaultTitle,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: resTextStyle30.copyWith(
                      fontSize: 15.sp, fontWeight: FontWeight.w600),
                ),
              )),
          SizedBox(
            height: 9.dp,
          ),
          Padding(
            padding: EdgeInsets.only(right: 12.dp),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "发布时间:${c.data?.created ?? ""}",
                  style: resTextStyle7A.copyWith(fontSize: 12.sp),
                ),
                Visibility(
                  visible: false,
                  child: Text(
                    "浏览量:${c.data?.codeNum ?? "0"}",
                    style: resTextStyle7A.copyWith(fontSize: 12.sp),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

class SpecItem extends MvcStatelessWidget<GoodController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 112.dp,
      margin: EdgeInsets.only(left: 8.dp, right: 8.dp, top: 8.dp),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.dp),
      ),
      child: Column(
        children: [
          Container(
            height: 66.dp,
            padding: EdgeInsets.only(top: 18.dp),
            child: InkWell(
              onTap: c.onSkuClick,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    width: 12.dp,
                  ),
                  Text(
                    "规格",
                    style: resTextStyle7A,
                  ),
                  SizedBox(
                    width: 16.dp,
                  ),
                  Expanded(
                      child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      for (var spec in c.data?.spec ?? [])
                        Padding(
                          padding: EdgeInsets.only(
                              bottom: spec == c.data.spec.last ? 0.dp : 8.dp),
                          child: Text(
                            "${spec.name}：${getSpecValue(spec.list)}",
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: resTextStyle30,
                          ),
                        ),
                    ],
                  )),
                  SizedBox(
                    width: 7.dp,
                  ),
                 Icon(Icons.arrow_forward_ios_rounded,size: 16.dp,),
                  SizedBox(
                    width: 7.dp,
                  ),
                ],
              ),
            ),
          ),
          Padding(
              padding: EdgeInsets.only(left: 56.dp, right: 12.dp),
              child: LineWidget()),
          Container(
            height: 45.dp,
            child: Row(
              children: [
                SizedBox(
                  width: 12.dp,
                ),
                Text(
                  "货源",
                  style: resTextStyle7A,
                ),
                SizedBox(
                  width: 16.dp,
                ),
                Text(
                  "浙江省 杭州市",
                  style: resTextStyle30,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

String getSpecValue(List<GoodDataSpecListBean> list) {
  String spec = "";
  for (var value in list) {
    if (spec.isEmpty) {
      spec += value.name;
    } else {
      spec += "；" + value.name;
    }
  }
  return spec;
}

class ValueItem extends MvcStatelessWidget<GoodController> {
  String getValue() {
    String str = "";
    for (int i = 0; i < (c.data?.propFormat?.length ?? 0); i++) {
      if (i > 1) {
        break;
      }
      final value = c.data.propFormat[i];
      str += value.name + "：" + value.value + "  ";
    }
    return str;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50.dp,
      margin: EdgeInsets.only(left: 8.dp, right: 8.dp, top: 8.dp),
      child: Material(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.dp),
        child: InkWell(
          onTap: c.onValueClick,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                width: 12.dp,
              ),
              Text(
                "属性",
                style: resTextStyle7A,
              ),
              SizedBox(
                width: 16.dp,
              ),
              Expanded(
                  child: Text(
                getValue(),
                style: resTextStyle30,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              )),
              SizedBox(
                width: 7.dp,
              ),

              Icon(Icons.arrow_forward_ios_rounded,size: 16.dp,),
              SizedBox(
                width: 7.dp,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ShopItem extends MvcStatelessWidget<GoodController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 68.dp,
      margin: EdgeInsets.only(left: 8.dp, right: 8.dp, top: 8.dp),
      padding: EdgeInsets.only(left: 12.dp, right: 12.dp),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(8.dp)),
      child: Row(
        children: [
          ClipRRect(
              borderRadius: BorderRadius.circular(4.dp),
              child: CachedImage(
                c.shopData?.shopHead ?? "",
                loadingImage: "images/xuankuanjia_shangkuan_xq.png",
                width: 36.dp,
                height: 36.dp,
              )),
          SizedBox(
            width: 8.dp,
          ),
          Expanded(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [

                  SizedBox(
                    width: 3.dp,
                  ),
                  Expanded(
                    child: Hero(
                      tag: "shop_${c.goodId}${c.tagEnd}",
                      child: Text(
                        c.shopData?.shopAddress ?? c.defaultShopName,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: resTextStyle30.copyWith(
                            fontSize: 16.sp, fontWeight: FontWeight.w600),
                      ),
                    ),
                  )
                ],
              ),
              SizedBox(
                height: 0.dp,
              ),
              Text(
                "店铺主营：${c.shopData?.mainCat ?? ""}",
                style: resTextStyle7A.copyWith(fontSize: 12.sp),
              )
            ],
          )),
          SizedBox(
            width: 8.dp,
          ),
          DBorderButton(
            "进入店铺",
            width: 80.dp,
            height: 28.dp,
            borderRadius: (28.dp),
            fontSize: 14.sp,
            fontColor: resMainColor,
            borderColor: resMainColor,
            onTap: c.onShopClick,
          )
        ],
      ),
    );
  }
}

class TipsContentItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40.dp,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: 1.dp,
            width: 36.dp,
            color: Color(0xffC2C2C2),
          ),
          SizedBox(
            width: 12.dp,
          ),
          Text(
            "商品详情",
            style: resTextStyle7A.copyWith(fontSize: 12.sp),
          ),
          SizedBox(
            width: 12.dp,
          ),
          Container(
            height: 1.dp,
            width: 36.dp,
            color: Color(0xffC2C2C2),
          ),
        ],
      ),
    );
  }
}

class ContentItem extends MvcStatelessWidget<GoodController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: HtmlWidget(c.data?.description ?? ""),
    );
  }
}

class TitleBarItem extends MvcStatelessWidget<GoodController> {
  final colorTween = ColorTween(begin: Colors.white, end: Colors.black);

  @override
  Widget build(BuildContext context) {
    return Stateful(
        bind: () => [c.titleBarOpacity],
        builder: (context) {
          final reverse = 1 - c.titleBarOpacity;
          final color = colorTween.lerp(c.titleBarOpacity);
          return Container(
            color: Colors.white.withOpacity(c.titleBarOpacity),
            child: SafeArea(
              bottom: false,
              child: Container(
                height: 40.dp,
                child: Stateful(
                  bind: ()=>[c.isDetails],
                  builder: (context) {
                    return Row(
                      children: [
                        GestureDetector(
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                          child: Container(
                              margin: EdgeInsets.only(left: 8.dp),
                              width: 28.dp,
                              height: 28.dp,
                              alignment: Alignment.center,
                              padding: EdgeInsets.only(right: 3.dp),
                              decoration: BoxDecoration(
                                  color: Colors.black.withOpacity(reverse * 0.5),
                                  borderRadius: BorderRadius.circular(28.dp)),
                              child: Icon(
                                Icons.arrow_back_ios_outlined,
                                size: 19.dp,
                                color: color,
                              )),
                        ),
                        Expanded(child: Container()),
                        Opacity(
                            opacity: c.titleBarOpacity,
                            child: _buildItem("商品", !c.isDetails)),
                        Opacity(
                            opacity: c.titleBarOpacity,
                            child: _buildItem("详情", c.isDetails)),
                        Expanded(child: Container()),
                        GestureDetector(
                          onTap: c.onHomeClick,
                          child: Container(
                              margin: EdgeInsets.only(right: 8.dp),
                              width: 28.dp,
                              height: 28.dp,
                              padding: EdgeInsets.only(left: 1.dp,bottom: 1.dp),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: Colors.black.withOpacity(reverse * 0.5),
                                  borderRadius: BorderRadius.circular(28.dp)),
                              child: Icon(
                                Icons.home,
                                size: 19.dp,
                                color: color,
                              )),
                        ),
                      ],
                    );
                  }
                ),
              ),
            ),
          );
        });
  }

  Widget _buildItem(String title, bool select) {
    Color color = select ? resMainColor : Color(0xff302F2F);
    return SizedBox(
      width: 90.dp,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            title,
            style: resTextStyle.copyWith(color: color),
          ),
          SizedBox(
            height: 4.dp,
          ),
          Opacity(
            opacity: select ? 1 : 0,
            child: Container(
              width: 28.dp,
              height: 2.dp,
              decoration: BoxDecoration(
                  color: resMainColor,
                  borderRadius: BorderRadius.circular(2.dp)),
            ),
          )
        ],
      ),
    );
  }
}

class BottomItem extends MvcStatelessWidget<GoodController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
          top: false,
          child: Container(
            height: 49.dp,
            child: Row(
              children: [
                SizedBox(
                  width: 4.dp,
                ),
                _buildItem(Icons.add_business_rounded, "店铺", c.onShopClick),
                _buildItem(
                    Icons.all_inbox_rounded, "联系", c.onContactClick),
                SizedBox(
                  width: 3.dp,
                ),
                _buildItem(Icons.account_box_rounded, "加入选款架",
                    c.onChooseModelClick,isSelect: (c.data?.isCollected??0)==1),
                SizedBox(
                  width: 6.dp,
                ),
                _buildButton(
                    "加入购物车",
                    [
                      Color(0xffF87A0B),
                      Color(0xffF28B24),
                    ],
                    resBorderRadius(bottomLeft: 8.dp, topLeft: 8.dp),
                    c.onSkuClick),
                _buildButton(
                    "立即购买",
                    [
                      Color(0xffDE271D),
                      Color(0xffFEF2B21),
                    ],
                    resBorderRadius(topRight: 8.dp, bottomRight: 8.dp),
                    c.onSkuClick),
                SizedBox(
                  width: 12.dp,
                ),
              ],
            ),
          )),
    );
  }

  Widget _buildButton(String text, List<Color> colors,
      BorderRadius borderRadius, Function onTap) {
    return Expanded(
        child: GestureDetector(
      onTap: onTap,
      child: Container(
        height: 36.dp,
        child: Center(
          child: Text(
            text,
            style: resTextStyle.copyWith(color: Colors.white),
          ),
        ),
        decoration: BoxDecoration(
            borderRadius: borderRadius,
            gradient: LinearGradient(
                colors: colors,
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter)),
      ),
    ));
  }

  Widget _buildItem(IconData data, String title, Function onTap,
      {bool isSelect = false}) {
    final textColor=isSelect?resMainColor:Color(0xff302F2F);
    return GestureDetector(
      onTap: onTap,
      child: Container(
        color: Color(0x01ffffff),
        padding: EdgeInsets.only(left: 10.dp, right: 10.dp),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 2.dp,
            ),
            Icon(data,size: 16.dp,color: textColor,),
            SizedBox(
              height: 6.dp,
            ),
            Text(
              title,
              style: resTextStyle.copyWith(color: textColor,fontSize: 10.sp),
            )
          ],
        ),
      ),
    );
  }
}
